<script setup lang="ts">
	import tabbar from '@/components/tabbar.vue'
	import list from '../components/list.vue'
	import {
		reactive, computed, ref
	} from 'vue'
	import {
		onReachBottom, onShow, onReady,onLoad,onPullDownRefresh
	} from '@dcloudio/uni-app'
	import home from '../../../api/home.js'
	import getLocation from '../../../utils/location.js';
	let parames = reactive({
		list: {
			recommend_company: [],
			company: [],
			activite: []
		},
		swiperImg: [],
		fileUrl: uni.getStorageSync('fileUrl') || '',
		page: 1,
		loadStatus: '',
		city: ''
	})
	let current = ref(0)
	let muted = ref(true)
	let autoplay = ref(true)
	let videoContext = ref(null)
	//加载更多
	const loadmore = () => {
		if(parames.loadStatus == 'nomore') return
		indexCompany()
	}
	const swiperChange = (v: any) => {
		current.value = v.detail.current
	}
	const onSwiperImg = (e: any) => {
		if(!e.path) return
		if(e.switch) {
			uni.switchTab({
				url: '/'+ e.path
			})
		}else {
			uni.navigateTo({
				url: '/'+ e.path
			})
		}
	}
	//获取首页banner
	const getBanner = async () => {
		const res = await home.getBanner()
		parames.swiperImg = res.data
	}
	//首页（名企推荐）
	const indexRecommend = async () => {
		const res = await home.indexRecommend({
			city: parames.city
		})
		if(res.code === 200){
			parames.list.recommend_company = res.data
			console.log(parames.list.recommend_company)
		}
	}
	//首页（名企）
	const indexCompany = async () => {
		const res = await home.indexCompany({
			city: parames.city,
			size: 10,
			page: parames.page,
			// flag: 2
		})
		if(res.code === 200){
			parames.list.company = [...parames.list.company,...res.data]
			if (res.data.length < 10) return moreStatus('nomore')
			if (res.data.total <= 10) {
				parames.loadStatus = 'nomore'
			} else {
				moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
			}
			if (res.data.length === 0) return false
			parames.page += 1 // 当前页加1
		}
	}
	//首页（精选沙龙）
	const indexActivite = async () => {
		const res = await home.indexActivite({
			city: parames.city
		})
		if(res.code === 200){
			parames.list.activite = res.data
		}
	}
	
	const moreStatus = (status: string) => {
		parames.loadStatus = status
	}
	const onMuted = () => {
		muted.value = !muted.value
	}
	const location = (isModal = true) => {
		getLocation(isModal).then((res) => {
			parames.city = res.city
			uni.stopPullDownRefresh()
			init()
		}).catch((err) => {
			uni.stopPullDownRefresh()
			parames.city = err.city
			init()
		})
	}
	onReachBottom(() => {
		loadmore()
	})
	const init = () => {
		getBanner()
		indexRecommend()
		indexCompany()
		indexActivite()
	}
	onLoad(() => {
		location(false)
	})
	onPullDownRefresh(() => {
		parames.list.company = []
		parames.page = 1
		location()
	})
	onShow(() => {
		parames.city = uni.getStorageSync('address').city
		if(videoContext.value) {
			videoContext.value.play()
		}
	})
	onReady(() => {
		videoContext.value = uni.createVideoContext('myVideo')
	})
	const filterClass = computed(() => (type : any) => {
		let t = ''
		switch (type) {
			case 1:
				t = 'content-sl-tag-1'
				break
			case 2:
				t = 'content-sl-tag-2'
				break
			case 3:
				t = 'content-sl-tag-3'
				break
			default:
				t = 'content-sl-tag-1'
		}
		return t

	})
	const filterStatus = computed(() => (type : any) => {
		let t = ''
		switch (type) {
			case 0:
				t = '报名中'
				break
			case 1:
				t = '进行中'
				break
			case 2:
				t = '已结束'
				break
		}
		return t

	})
	const del = (i: number) => {
		parames.list.recommend_company.splice(i, 1)
	}
	const skip = (url: string,url2: string = '') => {
		if(!url2) return uni.navigateTo({
			url: url
		})
		uni.switchTab({
			url: url2
		})
		
	}
</script>

<template>
	<u-navbar :is-back="false" title="" :background="{}" class="bg" :borderBottom="false">
		<view class="slot-wrap flex flex-ai-c flex-jc-sb f1">
			<view class="text flex flex-jc-c flex-ai-c">
				<i-icon icon="icon-city-" size="20rpx" color="rgb(182,182,182)" />
				<text style="color: #fff;margin-left: 10rpx;" class="s-line-text">{{parames.city || '定位失败'}}</text>
			</view>
			<view style="color: #fff;font-size: 32rpx;font-weight: 500;">奢董会</view>
			<view></view>
		</view>
	</u-navbar>
	<view style="position: relative;">
		<swiper :current="current" style="width: 100%;height: 750rpx;" @change="swiperChange">
			<swiper-item v-for="(item,index) in parames.swiperImg" :key="index" style="width: 100%;height: 100%;">
				<!-- poster封面 -->
				<video v-if="item.content[0] && item.type == 2" id="myVideo" :muted="muted" :src="item.content[0]" style="width: 100%;height: 100%;" :autoplay="autoplay" object-fit="cover"
					:controls="false" loop :show-fullscreen-btn="false" :enable-progress-gesture="false" />
				<image v-if="item.content[0] && item.type == 1" style="width: 100%;height: 100%;" :src="item.content[0]" @click="onSwiperImg(item)"></image>
			</swiper-item>
		</swiper>
		<view style="width: 100%;height: 2rpx;position: absolute;left: 0;bottom: 50rpx;" class="flex flex-jc-c">
			<view v-for="(item,i) in parames.swiperImg.length" :key='i' class="swiper-imgs" 
				:class="[i == current ? 'swiper-dot' : 'swiper-active']"></view>
		</view>
	</view>

	<view @click="onMuted"
		style="position: absolute;right: 40rpx;border: 1px solid #fff;border-radius: 50%;width: 80rpx;height: 80rpx;top: 600rpx;"
		class="flex flex-ai-c flex-jc-c">
		<i-icon :icon="muted?'icon-shengyin':'icon-Open_Sound'" size="80rpx" color="#fff" />
	</view>
	<!-- 名企推荐 -->
	<view class="content" v-if="parames.list.recommend_company.length">
		<view class="flex flex-jc-sb content-title">
			<view>名企推荐</view>
			<view class="font-24" @click="skip(false,`/pages/tabs/networking/index`)">
				更多
				<u-icon name="arrow-right" color="#666666"></u-icon>
			</view>
		</view>
		<scroll-view scroll-x class="scroll-view">
			<view class="flex scroll-view-for">
				<view v-for="(item,index) in parames.list.recommend_company" :key="index" @click="skip(`/pages/networking/detail/index?id=${item.id}`)">
					<view class="scroll-view-list">
						<!-- tab -->
						<view class="flex flex-jc-sb flex-ai-c">
							<view class="g-container">
								<view class="g-inner" v-if="item.tag"></view>
								<view class="g-inner-text" v-if="item.tag">{{item.tag}}</view>

							</view>
							<!-- <view class="list-name flex flex-jc-c flex-ai-c">荣耀主席</view> -->
							<view style="margin-right: 20rpx;" @click.stop="del(index)">
								<u-icon name="close" color="#999999" size="22"></u-icon>
							</view>
						</view>
						<!-- 内容 -->
						<view class="u-text-center">
							<view class="list-headimg">
								<image :src="item.headavatar" style="width: 90rpx;height: 90rpx;"></image>
							</view>
							<view class="list-name">
								{{item.auth_name}}
							</view>
							<view class="list-post" v-if="item.company_info">
								{{item.company_info?.position}}
							</view>
							<view class="list-company s-line-text" style="padding: 0 10rpx;" v-if="item.company_info">
								{{item.company_info.company}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>

	<!-- 精选沙龙 -->
	<view class="content content-2" v-if="parames.list.activite.length">
		<view class="flex flex-jc-sb content-title">
			<view>精选沙龙</view>
			<view class="font-24" @click="skip(`/pages/common/salon/index`)">
				更多
				<u-icon name="arrow-right" color="#666666"></u-icon>
			</view>
		</view>
		<scroll-view scroll-x>
			<view class="flex scroll-view-for">
				<view v-for="(item,index) in parames.list.activite" :key="index" style="margin-right: 15rpx;" @click="skip(`/pages/common/salon/detail?id=${item.id}`)">
					<view class="content-sl">
						<view class="content-sl-bg">
							<view class="content-sl-img">
								<image style="width: 100%;height: 100%;" :src="item.image"></image>
							</view>
							<view class="content-sl-tag" :class="filterClass(item.status)">
								{{filterStatus(item.status)}}
							</view>
						</view>
						<view class="description mb_20">
							{{item.activity_title}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

	<!-- 瀑布流 -->
	<list @loadmore="loadmore" :list='parames.list.company' :loadStatus="parames.loadStatus" />
	<!-- 占位 -->
	<view style="height: 148rpx;"></view>
	<tabbar :current="0" />
</template>

<style lang="scss">
	page {
		background: #F8F8F8;
		height: 100%;
		overflow: auto;
	}
</style>
<style lang="scss" scoped>
	@import "home.scss";
	.swiper-active {
		background: rgba(0,0,0,0.1);
	}
	
	.swiper-dot {
		background: #FFFFFF;
	}
	.swiper-imgs{
		width: 70rpx;
		height: 2rpx;
		
	}
	.slot-wrap {
		padding: 0 0 0 25rpx;

		.text {
			width: 140rpx;
			height: 58rpx;
			border-radius: 29rpx;
			border: 2rpx solid #FFFFFF;
			font-weight: 400;
			font-size: 20rpx;
			background: rgba(0,0,0,0.5);
		}

	}

	.content-2 {
		border-radius: 10rpx;
		background: #fff;
		margin-top: 20rpx !important;

		.content-title {
			padding: 30rpx 20rpx !important;
		}

		.content-sl {
			width: 274rpx;
			margin: 0 10rpx;

			.content-sl-bg {
				position: relative;
			}

			.content-sl-img {
				height: 153rpx;
			}

			.content-sl-tag {
				@include initStyle(20rpx, 400, #FFFFFF);
				position: absolute;
				top: 12rpx;
				left: 12rpx;
				width: 76rpx;
				height: 30rpx;
				border-radius: 5rpx;
				text-align: center;
				line-height: 30rpx;
			}

			.content-sl-tag-1 {
				background: #8B5B30;
			}

			.content-sl-tag-2 {
				background: #000000;
			}

			.content-sl-tag-3 {
				background: linear-gradient(231deg, #999999 0%, #CACACA 100%);
			}
		}
	}

	.content {
		margin: 0 20rpx;

		.content-title {
			padding: 30rpx 0;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.scroll-view {
			width: 100%;
			height: 286rpx;

			.scroll-view-list {
				margin: 0 10rpx;
				width: 270rpx;
				height: 286rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 3rpx rgba(238, 239, 240, 0.5);
				border-radius: 20rpx;
				border: 1rpx solid #EEEFF0;

				.list-name {
					@include initStyle(23rpx, 600, #333333);
				}

				.list-headimg {
					margin-top: 11rpx;

					image {
						border-radius: 50%;
						@include initStyle(22rpx, 400, #333333);
					}

				}

				.list-post {
					font-weight: 400;
					font-size: 22rpx;

				}

				.list-company {
					@include initStyle(22rpx, 400, #333333);
					margin-top: 20rpx;
				}
			}
		}
	}
</style>